<template>
    <div class="card rdsp-card-view" data-page="realTimeMoni_nine">
        <div class="card-content rank-content card-content-padding">
            <div class="rdsp-card-title">
                <div class="left-title">探测器实时监测</div>
                <div class="rdsp-card-title-right">
                </div>
            </div>
            <div class="rdsp-card-con">
                <div class="realTimeMoni">
                    <ul>
                        <li class="">
                            <a href="/moreDectorState/1/0/0/0/" data-view=".view-main">
                                <div class="li-top" style="background:#F7F7F7;margin-bottom: 8px;">
                                    <div class="num" id="alertNum_id" style="color:#E07762;font-size: 21px;">0</div>
                                </div>
                                <div class="num" style="color:#999999;font-size: 12px;">报警</div>
                            </a>
                        </li>
                        <li class="">
                            <a href="/moreDectorState/2/0/0/0/" data-view=".view-main">
                                <div class="li-top" style="background:#F7F7F7;margin-bottom: 8px;">
                                    <div class="num" id="faultNum_id" style="color:#FFC73B;font-size: 21px;">0</div>
                                </div>
                                <div class="num" style="color:#999999;font-size: 12px;">故障</div>
                            </a>
                        </li>
                        <li class="">
                            <a href="/moreDectorState/3/0/0/0/" data-view=".view-main">
                                <div class="li-top" style="background:#F7F7F7;margin-bottom: 8px;">
                                    <div class="num" id="shelNum_id" style="color:#9F9F9F;font-size: 21px;">0</div>
                                </div>
                                <div class="num" style="color:#999999;font-size: 12px;">屏蔽</div>
                            </a>
                        </li>
                        <li class="">
                            <a href="/moreDectorState/4/0/0/0/" data-view=".view-main">
                                <div class="li-top" style="background:#F7F7F7;margin-bottom: 8px;">
                                    <div class="num" id="linkage_id" style="color:#2E76CA;font-size: 21px;">0</div>
                                </div>
                                <div class="num" style="color:#999999;font-size: 12px;">联动</div>
                            </a>
                        </li>
                        <li class="">
                            <a href="/moreDectorState/5/0/0/0/" data-view=".view-main">
                                <div class="li-top" style="background:#F7F7F7;margin-bottom: 8px;">
                                    <div class="num" id="normalNum_id" style="color:#69BA71;font-size: 21px;">0</div>
                                </div>
                                <div class="num" style="color:#999999;font-size: 12px;">正常</div>
                            </a>
                        </li>
                    </ul>
                    <div class="realTimeMoni-allCount"></div>
                    <!-- 室内地图 -->
                    <div class="realTimeMoni-list fengMap-contain">
                        <div id="nineFengMap"></div>
                        <!-- <div class="realTimeMoni-list-item" id="realTimeMoni-alert-content"></div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .li-top span {
        color: #fff;
    }
    .hiddenCheck-hr {
        height: 1px;
        text-align: center;
        background-color: rgba(225, 225, 225, 0.5);
        position: relative;
        margin-bottom: 10px;
        margin-top: 15px;
    }
    .hiddenCheck-hr p {
        position: absolute;
        background-color: #fff;
        padding: 0 10px;
        top: -9px;
        color: #666;
        left: calc(50% - 100px);
    }
    .fengMap-contain{
        width: 100%;
        margin-top: 20px;
    }
    #nineFengMap{
        width: 100%;
        height: 170px;
    }
</style>
<script>
    return {
        data: function () {
            return {}
        },
        methods: {
            //载入蜂鸟图
            initFengMap:function(){
                var self = this;
                var c_id = "";
                if (single_Orgid == "") {
                    c_id = userInfor.organizationIds;
                } else {
                    c_id = single_Orgid;
                }
                int_MainFmap(nineCode,3,"nineFengMap",1);
            },
            showDecterStateNum: function () {
                var id_org = "";
                if (single_Orgid == "") {
                    id_org = userInfor.organizationIds;
                } else {
                    id_org = single_Orgid;
                }
                Dao.getFcfRealTimeStatusCountByVenues_ajax({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgId: id_org,
                    venuesId:nineCode
                }, function (data) {
                    $("#normalNum_id").html(common.transNullundefined(data.normalCount.toString())) ;
                    $("#alertNum_id").html(common.transNullundefined(data.fireAlarmCount.toString()));
                    $("#faultNum_id").html(common.transNullundefined(data.faultAlarmCount.toString()));
                    $("#shelNum_id").html(common.transNullundefined(data.shieldAlarmCount.toString()));
                    if (data.linkageAlarmCount) {
                        $("#linkage_id").html(common.transNullundefined(data.linkageAlarmCount.toString()));
                    } else {
                        $("#linkage_id").html("0");
                    }
                    $(".realTimeMoni-allCount").empty().append(
                        `<div class='hiddenCheck-hr'><p>实时警情设备总数` + data.notNormalCount +`，未处理` + data.notHandleCount + `</p></div>
                    `);
                    if (data.notNormalCount == 0) {
                        $(".realTimeMoni-allCount").css("margin-top", "13px");
                    }
                }, true);
            },
        },
        on: {
            pageAfterIn: function (e, page) {
                var self = this;
                self.showDecterStateNum();
                if(nineCode){
                    self.initFengMap();
                }
            }
        }
    }
</script>